<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>商城商城会员圈</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		body {
			background-color: #F0F1F2
		}

		.ming-active-goods-list {
			/*padding: 0.8rem 0.75rem;*/
		}

		.ming-active-goods-list-item {
			/*padding: 1rem 0;*/
			display: flex;
			flex-direction: row;
		}

		.ming-active-goods-list-item-img img {
			width: 4rem;
		}

		.ming-active-goods-list-item-right {
			padding-left: 0.75rem;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;
		}

		.tag-tuangou {
			display: inline-block;
			font-size: 0.8rem;
			color: #FFFFFF;
			background-color: #FF3862;
			height: 1.4rem;
			line-height: 1.4rem;
			padding: 0 1.1rem;
			border-radius: 1.4rem;
			box-shadow: 0 5px 10px RGBA(255, 210, 210, 0.7);
		}

		.activity_time {
			height: 2.6rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 0.11) 0%, rgba(107, 180, 255, 0.11) 100%, rgba(122, 174, 229, 0.11) 100%);
			line-height: 2.6rem;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.newproduct {
			height: 2.65rem;
			background: rgba(255, 255, 255, 1);

			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0.75rem;
			margin-top: 0.3rem;
		}

		.new_wraper {}

		.newproduct_left {
			background: url();
			background-repeat: no-repeat;
			background-size: auto 0.8rem;
			background-position: left center;
			padding-left: 10px;
			display: inline-block;
			font-size: 0.85rem;
			font-family: PingFangSC-Semibold;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}

		.newproduct_right span {
			font-size: 0.65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.newproduct_list {
			/*height: 6.75rem;*/
			background: rgba(255, 255, 255, 1);
			border-radius: 0.4rem;
			padding: 0.5rem;
			margin-bottom: 0.5rem;
			box-sizing: border-box;

		}

		.left_img {
			width: 5rem;
			height: 5rem;
			margin-right: 0.75rem;
		}

		.left_img img {
			border-radius: 0.2rem;
		}

		.right_cont {}

		.top_title {
			height: 2.2rem;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.top_title img {
			width: 1.6rem;
			height: 0.9rem;
			display: inline-block;
			transform: translateY(0.15rem);
			margin-right: 0.2rem;
		}

		.top_title span {
			font-size: 0.8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #222222;

			/*display: inline-block;*/
		}

		.mid_decri {
			/*display: flex;*/
		}

		.mid_decri_item {
			padding: 0 0.25rem;
			font-size: 0.5rem;
			font-weight: 400;
			color: rgba(255, 102, 66, 1);
			font-family: PingFangSC-Regular;
			background: rgba(255, 102, 66, 0.1);
			/*text-align: center;*/
			float: left;
			margin-top: 0.3rem;
			margin-right: 0.25rem;
			margin-bottom: 0.4rem;
			padding-top: 0.010rem;
			border-radius: 0.1rem;
		}

		.clear {
			clear: both;
		}

		.now_price {
			font-size: 1.1rem;
			font-family: 'PingFangSC-Semibold';
			font-weight: 600;
			color: rgba(255, 102, 66, 1);
			line-height: 1rem;
		}

		.collagezone_btn_success {
			margin-top: -2.2rem;
			width: 3.6rem;
			height: 2.1rem;
			display: inline-block;
			background: linear-gradient(270deg, rgba(0, 130, 213, 1) 0%, rgba(0, 90, 147, 1) 100%);
			border-radius: 0.2rem;

			text-align: center;
			float: right;
		}

		.collagezone_btn_sellout {
			margin-top: -2.2rem;
			width: 3.6rem;
			height: 2.1rem;
			display: inline-block;
			background:linear-gradient(270deg,rgba(214,214,214,1) 0%,rgba(167,167,167,1) 100%);
			border-radius: 0.2rem;
			text-align: center;
			float: right;
		}

		.success span {
			display: block;
		}
		.sellout span {
			display: block;
		}
		.price{margin-top:0.48rem}
        .price .item{
			height:1.1rem;
		}

	</style>
</head>

<body>
	<div id="app" class="aui-content" v-cloak="">
		<div class="">
			<div class="activity_time" v-if="info.length>=1" style="background:#F0F1F2">
				<span class=""
					style="display:inline-block;margin-right:0.25rem;font-size:0.7rem;font-weight:400;color:rgba(51,51,51,1);">活动时间</span>
				<span style="font-size:0.8rem;font-weight:bold;color:#2e2e2e;">{{tuan_date}}</span>
			</div>
			<div class="aui-border-b" style="padding-left:0.75rem;padding-right:0.75rem">
				<div v-for="vo in info" class="newproduct_list flex-box-x" tapmode
					@click="openWin_goods_detail(vo.good_id)">
					<div class="left_img">
						<img :src="vo.cover" alt="">
					</div>
					<div class="right_cont col-xs-x">
						<div class="top_title">
							<span>{{vo.title}}</span>
						</div>

						<section class="clear"></section>
						<div class="price">
							<div class="item">
								<span class="" style="font-size: .7rem;color:#E90000;">￥<span class=""
										style="font-size:1.1rem;color:#E90000;">{{vo.tuan_price}}</span></span>
							</div>
							<div class="item" style="margin-top:0.2rem"><del
									style="color:rgba(153,153,153,.7);font-size: .7rem;font-weight:400;">￥{{vo.current_price}}</del>
							</div>
							<div class="collagezone_btn_success" v-if="vo.status=='1'">
								<div class="success"
									style="font-family:PingFangSC-Regular;font-weight:400;color:rgba(255,255,255,1);">
									<span style="font-size:0.7rem;margin-top:0.2rem;font-weight: bold;">去拼团</span>
									<span style="font-size:0.5rem;margin-top:-0.05rem">{{vo.tuan_uid_num}}人成团</span>
								</div>

							</div>
							<div class="collagezone_btn_sellout" v-if="vo.status=='0'">
								<div class="sellout"
									style="font-size:0.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(255,255,255,1);">
									<span style="font-size:0.7rem;margin-top:0.2rem;font-weight: bold;">已售罄</span>
									<span style="font-size:0.5rem;margin-top:-0.05rem">{{vo.tuan_uid_num}}人成团</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


			<div class="">
				<div v-if="info.length<1" class="aui-text-center" style="margin-top: 40%;">
					<img src="../../image/bg/bg-nonedan.png"
						style="width:7.55rem;margin-left:50%;transform:translateX(-50%);" />
					<div class=""
						style="margin-top:.5rem;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;margin-top:1rem;color:#B3B3B3">
						暂无拼团信息
					</div>

					<div class="aui-text-center" tapmode onclick="openWin_goods_list_type('all')">
						<div class="aui-btn" style="display:inline-block;margin-top: 1.5rem;width:10rem;border-radius:0.3rem;height:2.3rem;line-height:2.3rem;text-align:center;background:#005A93;color:#fff;font-size:.8rem;font-family:PingFangSC-Regular;font-weight:400;">
							去逛逛
						</div>
					</div>
				</div>
			</div>
		</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			tuan_date: '',
			info: [],
			localcity:{"id":2608,"parentid":235,"categoryname":"平邑县","spell":"pingyixian","first_letter":"P"}
		},
		methods: {
			get_list: function () {
				get_data('api/Tuan/tuanGoodList', {
					token: $api.getStorage('token'),
					region_name:vm.localcity.categoryname
				}, function (ret) {
					if (ret) {
						vm.tuan_date = ret.data.tuan_date
						vm.info = ret.data.good_list
					}
				})
			},
			price_format: function (type, price) {
				var price = (price / 100).toFixed(2);
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			}
		}
	})
	apiready = function () {

		var temp_localcity = api.getPrefs({
				sync: true,
				key: 'localcity'
		});

		if (temp_localcity) {
				vm.localcity = JSON.parse(temp_localcity);
		}

		api.addEventListener({
				name: 'jobRefresh'
		}, function(ret, err) {
				localcity(function(ret) {
						if (ret) {
								vm.localcity = ret;
						  	vm.get_list()
						}
				})
		});


		vm.get_list()
		fnInitPullRefresh(function() {
			vm.get_list()
		})
		// 新版刷新
		refresh_new(function () {
			setTimeout(function () {
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})
	};
</script>

</html>
